<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <script type="text/javascript" src="JS/Booklist_admin.js"></script>
    
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .jx{
            width: 480px;
            height: 350px;
            background-color: #fff;
            position: absolute;
            top: 100px;
            left: 380px;
            box-shadow:0px 0px 10px 5px #eff2c5;
            background: rgba(250, 250, 250, 0.8);
            border-radius: 5%;
            overflow: hidden;
            /* padding: 15vmin 10vmin; */
            z-index: 0;
        }

        .jx::before{
            content: "";

            width:200%;
            height: 200%;
            /* background-color:#22292f; */
            background-image: conic-gradient(transparent,#66ddf7,transparent 30%);
            position: absolute;
            left: -50%;
            top: -50%;
            z-index: -2;
            animation: rotate 5s linear infinite;
        }

        @keyframes rotate {
            100%{
                transform: rotate(360deg);
            }
        }
        .jx::after{
            content: "";
            inset:1vmin;
            /* background: #000; */
            /* background: rgba(250, 250, 250, 0.5); */
            background-color: rgb(171, 195, 17);
            background: rgba(250, 250, 250, 0.37);
            /* border-radius: 4vmin; */
            position:absolute;
            z-index: -1;
        }

        #jx_border{
            width: 480px;
            height: 350px;
            background-color: #fff;
            position: absolute;
            top: 100px;
            left: 380px;
            transition: ease-in .3s;
            background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat,
            linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat,
            linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat,
            linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
            background-size: 0 2px, 2px 0, 0 2px, 2px 0;
            background-position: left top, right top, right bottom, left bottom;;
            /* border-radius: 5%; */
        }
        #jx_border:hover {
        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
        }
        /* .dl_or_zc{
            position: absolute;

        } */
        #title{
            font-size: x-large;
            font-weight: 550;
            /* top: 500px;
            left: 20px; */
             margin-top: 10px;
            /* margin-left: 167px;  */
            text-align-last: center;
            position: relative;
            color: rgb(246, 176, 188);
        }
        #p_usename{
            margin-left: 139px;
            margin-top: 35px;
        }
        #p_pwd{
            margin-left: 139px;
            margin-top: 0px;
        }
        #username{
            margin-left: 154px;
            height: 25px;
            border-radius: 10px/10px;
            box-shadow:0px 0px 10px 5px #acdbf3;
            background-color: rgb(211, 209, 209);
            background: rgba(211, 209, 209, 0.3);
        }
        #password{
            margin-left: 154px;
            height: 25px;
            border-radius: 10px/10px;
            box-shadow:0px 0px 10px 5px #acdbf3;
            background-color: rgb(211, 209, 209);
            background: rgba(211, 209, 209, 0.3);
        }
        .login{
            width: 45px;
            height: 25px;
            border-radius: 7.5px/10px;
        }
        .reg{
            width: 45px;
            height: 25px;
            border-radius: 7.5px/10px;
        }
        .login:hover{
            background-color: #a6bb2e;
        }
        .reg:hover{
            background-color: lightpink;
        }
        #table_dl_zc{
            margin-left: 185px;
        }
        
        .a1{
            margin-left: 40px;
        }
        .a2{
            margin-left: 246px;
        }
        a:hover{
            color: orangered;
        }

        .label{
            margin-left: 110px;
            /* text-align: center; */
            /* padding: 15px 17px; */
        }

        #select_id{
            margin-left: 288px;
        }

       #select_id select:hover{
        box-shadow:0px 0px 10px 5px #acdbf3;
       }

        .video-box {
            position: relative;
            height: 100vh;
            background-color: #C1CFF7;
            /*进行视频裁剪*/
            overflow: hidden;
        }

        .video-box .video-background {
            position: absolute;
            left: 50%;
            top: 50%;
            /*保证视频内容始终居中*/
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            /*保证视频充满屏幕*/
            object-fit: cover;
            min-height: 800px;
        }

    /* video::-webkit-media-controls-enclosure{ overflow: hidden; } */
    </style>
</head>
<body onload="javascript:focusOnUsername();">
    
    <div class="video-box">
        <video class="video-background" preload="auto" loop playsinline autoplay src="images/qqdzz.mp4" tabindex="-1" muted="muted"></video>
    </div>
    <div >
        <div class="dl_or_zc">
            <div class="jx">
                <!-- <div id="jx_border"></div> -->
                <p id="title">图书管理系统</p>
                <br>
                
                <form name="form1" action="">
                <!-- </br> -->
                    <!-- <div id="p_usename"><font size="3">用户名</font></div> -->
                    <table width="200" border="0">
                        <tr> 
                            <td>
                                <input id="username" type="text" placeholder="用户名">
                            </td> 
                        </tr>
                    </table>
                    
                    <br>
                    <!-- <div id="p_pwd"><font size="3">密码</font></div> -->
                    <table width="200" border="0">
                        <tr>
                            <td>
                                <input id="password" type="password" placeholder="密码">
                            </td>
                        </tr>
                    </table>
                    <br>
                        <div class="label">
                        <td><label>自动登录
                            <input type="checkbox" name="zddl" value="自动登录"></label>
                            <label>记住密码
                            <input type="checkbox" name="jzmm" value="记住密码"></label>
                            <label>忘记密码
                            <input type="checkbox" name="wjmm" value="忘记密码"></label>
                        </td>
                        </div>
                    <br>
                    <div id="select_id">
                    <td>身份</td>
                    <td><label>
                        <select>
                            <option value="1">管理员</option>
                            <option value="2">读者</option>
                        </select>
                    </label></td>
                    </div>
                    <table id="table_dl_zc" border="0">
                        <tr>
                            <td>
                                <input type="button" class="login" onclick="login()" style="cursor: pointer;" value="登录"/>
                                <input type="button"  class="reg" style="cursor: pointer;" value="注册"/>
                            </td>
                        </tr>
                    </table>
                    
                    <br>
                    <br>
                    <a class="a1" href="#">登录有问题?</a>
                    <a class="a2" href="tencent://message/?uin=3290003833&Site=&Menu=yes">联系我们</a>
                </form>
          
            </div> 
        </div>
    </div>
    
</body>
</html>